<template>
    <div class="container">
        <!-- 位置 -->
        <div class="position-x mt20 flex-align">
            <span>您的位置：首页</span>
            <span>></span>
            <span>游戏</span>
        </div>
        <!-- yboxa -->
        <div class="ydetails mt20">
            <!-- ydetails-l -->
            <div class="ydetails-l">
                <!-- ydetails-l-boxa -->
                <div class="ydetails-l-boxa box10">
                    <h2>王者荣耀</h2>
                    <!-- ydetails-l-boxa-y -->
                    <div class="ydetails-l-boxa-y mt10 flex-align">
                        <div class="ydetails-l-boxa-ya">
                            <img class="img100" src="~/assets/images/img2.png" alt="">
                        </div>
                        <div class="ydetails-l-boxa-yb flex1 ml20 fz16">
                            <p>类型：角色扮演</p>
                            <p>版本：1.2</p>
                            <p>标签：
                                <span class="ydetails-l-boxa-yb-span">5V5</span>
                                <span class="ydetails-l-boxa-yb-span">团战</span>
                                <span class="ydetails-l-boxa-yb-span">竞技</span>
                                <span class="ydetails-l-boxa-yb-span">MOBA</span>
                            </p>
                        </div>
                        <div class="ydetails-l-boxa-yc fz16">
                            <p>开发商：腾讯游戏</p>
                            <p>更新时间：2019-08-20</p>
                            <p>备案号：123456789101123</p>
                        </div>
                    </div>
                    <!--  -->
                    <div class="ydetails-l-boxa-x flex mt20">
                        <span class="yde-ta">介绍</span>
                        <span class="yde-tb fz16 ml20">横版竞技过关类手游</span>
                        <span class="yde-tc fz16 ml20 c02a">权限查看</span>
                    </div>
                    <div class="ydetails-l-boxa-q flex-align mt20">
                        <div class="yde-qa flex">
                            <span class="yde-qaa flex-center-align fz16 cfff">安卓版下载</span>
                            <span class="yde-qab">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </span>
                        </div>
                        <div class="yde-qa flex ml20">
                            <span class="yde-qaa flex-center-align fz16 cfff">苹果版下载</span>
                            <span class="yde-qab">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </span>
                        </div>
                        <div class="yde-qa flex ml20">
                            <span class="yde-qaa flex-center-align fz16 cfff">游戏盒下载</span>
                            <span class="yde-qab">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </span>
                        </div>
                    </div>
                    <p class="fz14 mt10">免责声明：本游戏来自网络上传，若有涉嫌侵权作品，请 联系告知</p>
                    <div class="ydetails-l-boxa-s mt20">
                        <div class="yde-qsa">
                            <p class="yde-qsa-t">系统要求：</p>
                            <p class="yde-qsa-b">安卓4.3或苹果iOS14系统及以上</p>
                        </div>
                        <div class="yde-qsa">
                            <p class="yde-qsa-t">是否免费：</p>
                            <p class="yde-qsa-b">免费</p>
                        </div>
                        <div class="yde-qsa">
                            <p class="yde-qsa-t">包名免费：</p>
                            <p class="yde-qsa-b">com.CNS.TrialOffroad</p>
                        </div>
                        <div class="yde-qsa mt10">
                            <p class="yde-qsa-t">MD5值：</p>
                            <p class="yde-qsa-b">
                                <span>a1962a73cbd41eacc79ce27439a66266</span>
                                <span class="fz16 ml20 c02a">隐私政策</span>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- ydetails-l-boxb -->
                <div class="ydetails-l-boxb mt20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">其他版本</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="ydetails-u">
                        <li>
                            <span class="ydetails-ua">版本名</span>
                            <span class="ydetails-ub">平台：安卓 / 苹果 /H5</span>
                            <span class="ydetails-uc">大小：1111MB</span>
                            <span class="ydetails-ud">下载</span>
                        </li>
                        <li>
                            <span class="ydetails-ua">版本名</span>
                            <span class="ydetails-ub">平台：安卓 / 苹果 /H5</span>
                            <span class="ydetails-uc">大小：1111MB</span>
                            <span class="ydetails-ud">下载</span>
                        </li>
                        <li>
                            <span class="ydetails-ua">版本名</span>
                            <span class="ydetails-ub">平台：安卓 / 苹果 /H5</span>
                            <span class="ydetails-uc">大小：1111MB</span>
                            <span class="ydetails-ud">下载</span>
                        </li>
                    </ul>
                </div>
                <!-- ydetails-l-boxc -->
                <div class="ydetails-l-boxc mt20 bgf">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">软件介绍</h4>
                        <div class="flex1">
                            <span class="ydetails-tc">软件截图</span>
                            <span class="ydetails-tc">相关文章</span>
                            <span class="ydetails-tc">合集推荐</span>
                        </div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <div class="ydetails-con">
                        <p>《抖音短视频》是一款可以让你脑洞大开的创意视频软件，软件为你提供海量的曲目和优质的画面，可以让你轻松上手，享受各种视频带给你的乐趣！还有更多与你有共同兴趣的小伙伴与你分享精彩，快来下载体验吧！
                            《明日方舟》是一款魔物主题的策略手游。在游戏中，玩家将管理一艘满载“魔物干员”的方舟，为调查来源神秘的矿石灾难而踏上旅途。</p>
                    </div>
                    <div class="ydetails-ct">游戏背景</div>
                    <div class="ydetails-con">
                        <p>《明日方舟》是一款魔物主题的策略手游。在游戏中，玩家将管理一艘满载“魔物干员”的方舟，为调查来源神秘的矿石灾难而踏上旅途。在这个宽广而危机四伏的世界中，你或许会看到废土中的城市废墟，或许会看到仿若幻境的亚人国度，或许会遭遇无法解读的神秘，或许参与无比残酷的战争。在有关幻想与异种生命的世界中，体验史诗与想象，情感与牵绊!
                        </p>
                    </div>
                    <div class="ydetails-ct">游戏特色</div>
                    <div class="ydetails-con">
                        <p>1、个性鲜明神秘动漫少女角色，闪亮登场； 2、奇异主题魔物游戏多样场景，自由穿梭； 3、超强智能优化操作系统功能，尽情畅玩。</p>
                    </div>
                    <div class="ydetails-ct">H3</div>
                    <div class="ydetails-con">
                        <p>《明日方舟》是一款魔物主题的策略手游。在游戏中，玩家将管理一艘满载“魔物干员”的方舟，为调查来源神秘的矿石灾难而踏上旅途。在这个宽广而危机四伏的世界中，你或许会看到废土中的城市废墟，或许会看到仿若幻境的亚人国度，或许会遭遇无法解读的神秘，或许参与无比残酷的战争。在有关幻想与异种生命的世界中，体验史诗与想象，情感与牵绊!
                        </p>
                    </div>
                </div>
                <!-- ydetails-l-boxd -->
                <div class="ydetails-l-boxd mt20 bgf pb20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">游戏截图</h4>
                        <div class="flex1">
                        </div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <swiper class="ydetails-swa mt20" slides-per-view="1" :space-between="0" :modules="modulesA"
                        :autoplay="{ delay: 2000, disableOnInteraction: false, }" navigation :loop="true">
                        <swiper-slide v-for="(item, index) in 5" :key="index">
                            <img class="img100" src="~/assets/images/img2.png" alt="">
                            <div class="swiper-a-text">{{ item.game_name }}</div>
                        </swiper-slide>
                    </swiper>
                </div>
                <!-- ydetails-l-boxd -->
                <div class="ydetails-l-boxd mt20 bgf pb20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">游戏截图</h4>
                        <div class="flex1">
                        </div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <swiper class="ydetails-l-dzm mt20" :initialSlide="5" :loop="true" :loopedSlides="2"
                        :effect="'coverflow'" :slidesPerView="3" :centeredSlides="true" :spaceBetween="-10"
                        :slidesOffsetBefore="0" navigation :grabCursor="true" :coverflowEffect="{
                            rotate: 0,
                            stretch: 0,
                            depth: 40,
                            modifier: 10,
                            slideShadows: false,
                        }" :pagination="{ clickable: true }" :modules="modulesB">
                        <swiper-slide v-for="(item, index) in 10" :key="index">
                            <img class="img100" src="~/assets/images/img2.png" alt="">
                            <div class="swiper-a-text">{{ item.game_name }}</div>
                        </swiper-slide>
                    </swiper>
                </div>
                <!-- ydetails-l-boxe -->
                <div class="ydetails-l-boxe mt20 bgf pb20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">相关攻略</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="ydetails-l-boxe-list">
                        <li v-for="(item, index) in 5" :key="index">
                            <nuxt-link to="">阿萨德苦力怕手机端快乐萨达</nuxt-link>
                        </li>
                    </ul>
                </div>
                <!-- ydetails-l-boxf -->
                <div class="ydetails-l-boxf mt20 bgf pb20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">合集推荐</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="ydetails-l-boxf-t mt20">
                        <li :class="index == 0 ? 'active' : ''" v-for="(item, index) in 4">5V5团战</li>
                    </ul>
                    <div class="ydetails-l-boxf-b mt20 ml20 flex pr20">
                        <div class="ydetails-l-boxf-ba">
                            <img class="img100" src="~/assets/images/img2.png" alt="" srcset="">
                        </div>
                        <div class="ydetails-l-boxf-bb flex1 ml20">
                            <div class="flex-align mt10">
                                <span class="fz18 flex1">5V5团战游戏合集大全</span>
                                <span class="fz14">[共9款游戏]</span>
                            </div>
                            <p class="mt15 ellipsis2">角色扮演模拟手游，这是一类非常好玩的角色扮演游戏，各种有意思的角色扮演为大家带来快乐！小编带来了角色扮演模拟手游合集，感兴趣的就快
                                ...</p>
                        </div>
                    </div>
                    <ul class="ydetails-l-boxf-c ml20">
                        <li v-for="(item, index) in 9">
                            <nuxt-link class="flex" to="">
                                <div class="ydetails-l-boxf-c-img">
                                    <img class="img100" src="~/assets/images/img2.png" alt="" srcset="">
                                </div>
                                <div class="ydetails-l-boxf-c-con flex1 ml12">
                                    <h4 class="fz16 mt20">王者荣耀</h4>
                                    <p class="fz12 mt5">角色扮演|中文</p>
                                    <p class="fz12 mt5">V1.2版本|789MB</p>
                                </div>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- ydetails-r -->
            <div class="ydetails-r">
                <!-- ydetails-r-boxa -->
                <div class="ydetails-r-boxa box10">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">相关游戏</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <swiper class="ydetails-r-boxa-con bgf" slides-per-view="1" :space-between="0" :modules="modulesA"
                        :autoplay="{
                            delay: 2000,
                            disableOnInteraction: false,
                        }" :pagination="{ clickable: true }" :loop="true">
                        <swiper-slide v-for="(item, index) in 3" :key="index">
                            <ul class="ydetails-r-boxa-cu">
                                <li v-for="(item, index) in 6" :key="index">
                                    <nuxt-link to="">
                                        <div class=" ydetails-r-boxa-cu-img">
                                            <img src="~/assets/images/img2.png" alt="">
                                        </div>
                                        <h4>狂野飙车</h4>
                                    </nuxt-link>
                                </li>
                            </ul>
                        </swiper-slide>
                    </swiper>
                </div>
                <!-- ydetails-r-boxb -->
                <div class="ydetails-r-boxb box10 mt20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">休闲益智类排行榜</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="ydetails-r-boxb-ul pl20 pr20 pb20 mt10">
                        <li @mouseenter="yzCurrent = index" :class="yzCurrent == index ? 'active' : ''"
                            v-for="(item, index) in 6" :key="index">
                            <nuxt-link class="ovn pb10 pt10" to="">
                                <span class="ydetails-r-boxb-ua">{{ index + 1 }}</span>
                                <div class="ydetails-r-boxb-ub fl ml12">阿萨德撒大声地</div>
                                <div class="ydetails-r-boxb-uc fl ml12">
                                    <div class="flex-align">
                                        <div class="ydetails-r-boxb-uc-img">
                                            <img src="~/assets/images/img2.png" alt="">
                                        </div>
                                        <div class="ydetails-r-boxb-uc-con ml12">
                                            <h4 class="fz16">王者荣耀</h4>
                                            <p class="fz12 mt5">角色扮演|中文</p>
                                            <p class="fz12 mt5">V1.2版本|789MB</p>
                                        </div>
                                    </div>

                                </div>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
                <!-- ydetails-r-boxc -->
                <div class="ydetails-r-boxc box10 mt20">
                    <div class="ydetails-t flex-align bgf">
                        <h4 class="ydetails-ta">近期大作</h4>
                        <div class="flex1"></div>
                        <nuxt-link to="" class="box-more">更多</nuxt-link>
                    </div>
                    <ul class="ydetails-r-boxc-ul pl20 pr20 pb20 mt10">
                        <li v-for="(item, index) in 6" :key="index">
                            <nuxt-link class="flex-align pt10 pb10" to="">
                                <div class="ydetails-r-boxc-uc flex-align">
                                    <div class="imgr100">
                                        <img src="~/assets/images/img2.png" alt="">
                                    </div>
                                    <div class="ydetails-r-boxc-uc-con ml12 flex1">
                                        <h4 class="fz16">王者荣耀</h4>
                                        <p class="fz12 mt5">角色扮演|中文</p>
                                        <p class="fz12 mt5">V1.2版本|789MB</p>
                                    </div>
                                    <div class="ydetails-r-boxc-uc-down flex-center-align">下载</div>
                                </div>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
                <!--  -->
            </div>
            <!--  -->
        </div>
        <!--  -->
    </div>
</template>
<script setup>
useSeoMeta({
    title: '淘贝购物',
    ogTitle: '陶贝购物',
    description: '我是一个购物网站，比淘宝还厉害。',
    ogDescription: '我是一个购物网站，比淘宝还厉害。',
    ogImage: 'https://taobei.com/image.png',
    twitterCard: 'taobei_summary_large_image',
})
const { $api, $used } = useNuxtApp()
/* 轮播图开始 */
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y, Autoplay, Thumbs, EffectCoverflow } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
const modulesA = [Navigation, Pagination, A11y, Autoplay, Thumbs];
const modulesB = [Navigation, Pagination, A11y, Autoplay, Thumbs, EffectCoverflow];

/*休闲益智类排行榜0 */
let yzCurrent = ref(0);

/*休闲益智类排行榜1 */
</script>
<style lang="scss" scoped>
.position-x {
    position: relative;
    padding: 0 22px;
    height: 44px;
    background: #FFFFFF;
    font-size: 14px;
    color: #626262;
}

.ydetails {
    position: relative;
    overflow: hidden;

    .ydetails-t {
        position: relative;
        padding: 0 20px;
        height: 51px;
        line-height: 51px;
        background: #FFFFFF;
        box-shadow: 0px 2px 6px 0px #E2E2E2;
        border-radius: 10px 10px 0px 0px;

        .ydetails-ta {
            position: relative;
            font-weight: bold;
            font-size: 22px;
            color: #333333;

            &::after {
                position: absolute;
                left: 50%;
                bottom: 0;
                content: '';
                margin-left: -27px;
                width: 54px;
                height: 9px;
                background-color: #02A7F0;
                border-radius: 5px;
            }
        }

        .ydetails-tc {
            display: inline-block;
            margin-left: 30px;
            text-align: center;
            line-height: 41px;
            width: 112px;
            height: 41px;
            background: #EEEEEE;
            border-radius: 4px;
            font-size: 18px;
            color: #333333;
            cursor: pointer;
        }
    }

    .ydetails-l {
        float: left;
        width: 740px;

        .ydetails-l-boxa {
            position: relative;
            padding: 13px 20px;

            h2 {
                font-weight: bold;
                font-size: 24px;
                color: #333333;
            }

            .ydetails-l-boxa-y {
                position: relative;
                overflow: hidden;

                p {
                    padding: 3px 0;
                }

                .ydetails-l-boxa-yb-span {
                    margin-left: 5px;
                    padding: 0 10px;
                    height: 22px;
                    background: #D9D9D9;
                    border-radius: 22px;
                    width: 45px;
                    font-size: 14px;
                    text-align: center;
                    line-height: 22px;
                }

                .ydetails-l-boxa-ya {
                    width: 110px;
                    height: 110px;
                    border-radius: 10px;
                    overflow: hidden;
                }

                .ydetails-l-boxa-yb {}

                .ydetails-l-boxa-yc {
                    width: 240px;
                }
            }

            .ydetails-l-boxa-x {
                .yde-ta {
                    width: 92px;
                    height: 24px;
                    border-radius: 2px;
                    border: 1px solid #D9D9D9;
                    font-size: 16px;
                    text-align: center;
                    line-height: 24px;
                }
            }

            .ydetails-l-boxa-q {
                .yde-qa {

                    .yde-qaa {
                        width: 100px;
                        height: 30px;
                        background: #FF8E2B;
                        border-radius: 2px;
                    }

                    .yde-qab {
                        width: 30px;
                        height: 30px;
                    }
                }
            }

            .ydetails-l-boxa-s {
                position: relative;
                padding: 20px 0 20px 40px;
                border-radius: 10px;
                border: 1px solid #757575;
                font-size: 14px;

                .yde-qsa {
                    display: inline-block;

                    &:nth-child(1) {
                        width: 280px;
                    }

                    &:nth-child(2) {
                        width: 150px;
                    }

                    &:nth-child(3) {}

                    &:nth-child(4) {}

                    .yde-qsa-b {
                        margin-top: 10px;
                    }

                    .yde-qsa-y {}
                }
            }
        }

        .ydetails-l-boxb {
            .ydetails-u {
                li {
                    position: relative;
                    padding: 0 20px;
                    height: 41px;
                    line-height: 41px;
                    background: #FBFBFB;
                    border-bottom: 1px solid #bbb;

                    &:last-child {
                        border-bottom: none;
                    }

                    span {
                        display: inline-block;
                    }

                    .ydetails-ua {
                        width: 150px;
                    }

                    .ydetails-ub {
                        width: 250px;
                    }

                    .ydetails-uc {
                        width: 200px;
                    }

                    .ydetails-ud {
                        text-align: center;
                        line-height: 32px;
                        width: 96px;
                        height: 32px;
                        background: #FF8E2B;
                        border-radius: 8px;
                        font-size: 14px;
                        color: #FFFFFF;
                        cursor: pointer;
                    }
                }
            }
        }

        .ydetails-l-boxc {
            .ydetails-con {
                padding: 20px;
            }

            .ydetails-ct {
                margin: 0 20px;
                padding-left: 20px;
                line-height: 47px;
                height: 47px;
                background: linear-gradient(90deg, #FF8E2B 0%, rgba(255, 142, 43, 0.05) 100%);
                font-weight: bold;
                font-size: 18px;
                color: #FFFFFF;
            }
        }

        .ydetails-l-boxd {
            .ydetails-swa {
                width: 700px;
                height: 356px;
                background: #FFFFFF;
                border-radius: 8px;
                overflow: hidden;

                :deep(.swiper-button-next) {
                    right: 0;
                    width: 40px;
                    height: 85px;
                    background: url(~/assets/images/xnext.png) no-repeat center center;
                    background-size: 100% 100%;

                    &::after {
                        display: none;
                    }
                }

                :deep(.swiper-button-prev) {
                    left: 0;
                    width: 40px;
                    height: 85px;
                    background: url(~/assets/images/xprev.png) no-repeat center center;
                    background-size: 100% 100%;

                    &::after {
                        display: none;
                    }
                }
            }

            .ydetails-l-dzm {
                height: 416px;
            }
        }

        .ydetails-l-boxe {
            .ydetails-l-boxe-list {
                li {
                    position: relative;
                    display: inline-block;
                    padding-left: 50px;
                    width: 50%;
                    height: 42px;
                    line-height: 42px;
                    border-bottom: 1px solid #BBBBBB;
                    font-size: 16px;
                    color: #333333;

                    &::after {
                        position: absolute;
                        left: 28px;
                        top: 50%;
                        content: '';
                        margin-right: 10px;
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: #333333;
                    }
                }
            }
        }

        .ydetails-l-boxf {
            .ydetails-l-boxf-t {
                li {
                    display: inline-block;
                    margin-left: 20px;
                    text-align: center;
                    line-height: 30px;
                    width: 89px;
                    height: 30px;
                    border-radius: 2px;
                    border: 1px solid #D9D9D9;
                    font-size: 18px;
                    color: #333333;

                    &.active {
                        color: #fff;
                        border: 1px solid #FF8E2B;
                        background: #FF8E2B;
                    }
                }
            }

            .ydetails-l-boxf-b {

                .ydetails-l-boxf-ba {
                    width: 228px;
                    height: 114px;
                    border-radius: 10px;
                    overflow: hidden;
                }
            }

            .ydetails-l-boxf-c {
                li {
                    display: inline-block;
                    margin-top: 20px;
                    width: 224px;
                    height: 100px;

                }

                .ydetails-l-boxf-c-img {
                    width: 100px;
                    height: 100px;
                    border-radius: 10px;
                    overflow: hidden;
                }
            }
        }
    }

    .ydetails-r {
        float: right;
        width: 440px;

        .ydetails-r-boxa-con {
            width: 440px;
            height: 334px;

            :deep(.swiper-pagination) {
                bottom: 10px;

                .swiper-pagination-bullet-active {
                    background-color: #FF8E2B;
                }
            }

            .ydetails-r-boxa-cu {
                li {
                    display: inline-block;
                    padding-top: 20px;
                    width: 33%;
                    height: 146px;
                    overflow: hidden;

                    .ydetails-r-boxa-cu-img {
                        margin: 0 auto;
                        width: 100px;
                        height: 100px;
                        border-radius: 10px;
                        overflow: hidden;
                    }

                    h4 {
                        margin-top: 5px;
                        text-align: center;
                        font-weight: 400;
                        font-size: 16px;
                        color: #333333;
                    }
                }
            }
        }

        .ydetails-r-boxb {
            .ydetails-r-boxb-ul {
                li {
                    border-bottom: 1px solid #BBBBBB;
                    font-size: 16px;
                    overflow: hidden;

                    &.active {
                        .ydetails-r-boxb-ub {
                            display: none;
                        }

                        .ydetails-r-boxb-uc {
                            display: block;
                        }
                    }

                    &:last-child {
                        border: none;
                    }

                    a {
                        position: relative;
                        display: block;
                        padding: 10px 0;
                        overflow: hidden;

                        .ydetails-r-boxb-ua {
                            float: left;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 20px;
                            height: 20px;
                            border-radius: 2px;
                            border: 1px solid #BBBBBB;
                            font-weight: 400;
                            font-size: 18px;
                            color: #BBBBBB;
                        }

                        .ydetails-r-boxb-uc {
                            position: relative;
                            display: none;
                            overflow: hidden;

                            .ydetails-r-boxb-uc-img {
                                float: left;
                                width: 100px;
                                height: 100px;
                                border-radius: 10px;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }

        .ydetails-r-boxc {
            .ydetails-r-boxc-ul {
                li {
                    border-bottom: 1px solid #BBBBBB;
                    font-size: 16px;

                    &:last-child {
                        border: none;
                    }

                    a {
                        display: block;

                        .ydetails-r-boxc-uc-down {
                            width: 52px;
                            height: 26px;
                            background: #FF8E2B;
                            border-radius: 2px;
                            font-size: 16px;
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
}
</style>